@import url("../style/public.less");
.chart-container {
    .cardStyle();
    padding: 0 2.4rem 1.6rem;
    margin-bottom: 0;
    position: relative;
}
.chart {
    position: relative;
    font-size: 1rem;
    color: var(--emui_text_secondary);
    .row {
        height: 3.25rem;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        position: relative;
        span {
            // 
            width: 2.1rem;
            overflow: hidden;
            transform: translateY(50%);
        }
        &::after {
            content: "";
            display: block;
            height: 1px;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 2.5rem;
            background-color: var(--emui_color_list_divider_light);
            transform: scaleY(0.5);
        }
    }
    .date {
        height: 2.7rem;
        padding: 0.6rem 3.1rem .8rem 0 ;
        box-sizing: border-box;
        display: flex;
    }
    .week {
        justify-content: space-between;
        span {
            flex: 1;
            text-align: center;
            &.selected {
                color: var(--emui_text_primary);
            }
        }
    }
    .month {
        // justify-content: flex-start;
        // transform: translateX(0.3rem);
        span {
            flex: 1;
            // border: 1px solid pink;
            text-align: center;
            // overflow: hidden;
            span {
                // border: 1px solid #000;
                display: inline-block;
                // transform: translateX(-50%);
            }
            &.selected {
                color: var(--emui_text_primary);
            }
        }
    }
    .bar {
        height: 13.2rem;
        position: absolute;
        left: 0;
        right: 3.1rem;
        bottom: 2.7rem;
        display: flex;
        .bar-box-week {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            .bar-week {
                width: 0.8rem;
                display: inline-block;
                border-radius: 0.4rem 0.4rem 0 0;
                transition: all 200ms ease;
                z-index: 1;
                background-color: var(--emui_accent);
            }
        }
        .bar-box-month {
            // border: 1px solid #000;
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            .bar-month {
                width: 0.6rem;
                border-radius: 0.3rem 0.3rem 0 0;
                transition: all 200ms ease;
                z-index: 1;
                background-color: var(--emui_accent);
            }
        }
        .selected {
            position: relative;
            overflow: hidden;
            &::before {
                content: "";
                width: 1px;
                height: 13.2rem;
                background-color: #D0D0D0;
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }
}

